<template>
    <view class="banner-box cf">
        <swiper
            class="card-swiper square-dot"
            :circular="true"
            :autoplay="true"
            interval="5000"
            duration="500"
            @change="cardSwiper"
            :indicator-color="indicatorColor"
            :indicator-dots="indicatorDots"
            :indicator-active-color="indicatorActiveColor"
        >
            <swiper-item
                v-for="(item, index) in list"
                :key="index"
                :class="cardCur == index ? 'cur' : ''"
            >
                <view
                    class="swiper-item"
                    @click="detail(item)"
                    v-if="item.type == 'image'"
                >
                    <image :src="item.img" mode="aspectFill"></image>
                    <view
                        class="text-white"
                        style="position: relative;bottom: 80rpx;font-size: 36rpx;left: 20rpx;"
                    >
                        {{ item.title }}
                    </view>
                </view>
                <!-- #ifdef MP-WEIXIN -->
                <view class="swiper-item" v-if="item.type == 'mpad'">
                    <view class="ad-box">
                        <ad :unit-id="item.ad_url" ad-intervals="35"></ad>
                    </view>
                </view>
                <!-- #endif -->
            </swiper-item>
        </swiper>
    </view>
</template>

<script>
    const MyApp = getApp();
    const globalData = MyApp.globalData;
export default {
    name: 'banner',
    props: {
        list: {
            type: [Array, Object],
            default: () => {
                return [];
            }
        },
        indicatorColor: {
            type: [String, Object],
            default: 'rgb(40, 44, 53)'
        },
        indicatorActiveColor: {
            type: [String, Object],
            default: 'rgb(40, 44, 53)'
        },
        indicatorDots: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            cardCur: 0,
            swiperList: [],
            dotStyle: false,
            towerStart: 0,
            direction: ''
        };
    },
    onLoad() {
        this.TowerSwiper('swiperList');
        // 初始化towerSwiper 传已有的数组名即可
    },
    methods: {
        detail(item) {
            // 如果是视频
            if (item.vid > 0) {
                MyApp.godetail(item.vid);
            }
            // 如果是广告
            if (item.ad_url != '') {
                uni.navigateTo({
                    url: '/pages/webview/about?url=' + encodeURIComponent(item.ad_url)
                })
            }
        },
        DotStyle(e) {
            this.dotStyle = e.detail.value;
        },
        // cardSwiper
        cardSwiper(e) {
            this.cardCur = e.detail.current;
        },
        // towerSwiper
        // 初始化towerSwiper
        TowerSwiper(name) {
            let list = this[name];
            for (let i = 0; i < list.length; i++) {
                list[i].zIndex =
                    parseInt(list.length / 2) +
                    1 -
                    Math.abs(i - parseInt(list.length / 2));
                list[i].mLeft = i - parseInt(list.length / 2);
            }
            this.swiperList = list;
        },

        // towerSwiper触摸开始
        TowerStart(e) {
            this.towerStart = e.touches[0].pageX;
        },

        // towerSwiper计算方向
        TowerMove(e) {
            this.direction =
                e.touches[0].pageX - this.towerStart > 0 ? 'right' : 'left';
        },

        // towerSwiper计算滚动
        TowerEnd(e) {
            let direction = this.direction;
            let list = this.swiperList;
            if (direction == 'right') {
                let mLeft = list[0].mLeft;
                let zIndex = list[0].zIndex;
                for (let i = 1; i < this.swiperList.length; i++) {
                    this.swiperList[i - 1].mLeft = this.swiperList[i].mLeft;
                    this.swiperList[i - 1].zIndex = this.swiperList[i].zIndex;
                }
                this.swiperList[list.length - 1].mLeft = mLeft;
                this.swiperList[list.length - 1].zIndex = zIndex;
            } else {
                let mLeft = list[list.length - 1].mLeft;
                let zIndex = list[list.length - 1].zIndex;
                for (let i = this.swiperList.length - 1; i > 0; i--) {
                    this.swiperList[i].mLeft = this.swiperList[i - 1].mLeft;
                    this.swiperList[i].zIndex = this.swiperList[i - 1].zIndex;
                }
                this.swiperList[0].mLeft = mLeft;
                this.swiperList[0].zIndex = zIndex;
            }
            this.direction = '';
            this.swiperList = this.swiperList;
        }
    }
};
</script>

<style lang="scss" scoped>
.banner-box {
    position: relative;

    .ad-box {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        transform: translateY(-50%);
    }

    .tower-swiper .tower-item {
        transform: scale(calc(0.5 + var(--index) / 10));
        margin-left: calc(var(--left) * 100upx - 150upx);
        z-index: var(--index);
    }
}
</style>
